<template>
    <Setting v-if="findActions('setting')" />
    <Guide   v-if="findActions('guide')" />
    <Screen  v-if="findActions('screen')" />
    <Weather v-if="findActions('weather')" />
    <Theme   v-if="findActions('theme')" />
    <Dark type="icon"   v-if="findActions('dark')"/>
    <Gray    v-if="findActions('gray')"/>
    <tabs    v-if="findActions('tabs')"/>
</template>
<script lang='ts' setup>
import Setting from "@/components/Action/option/index.vue"
import Guide from "@/components/Action/guidelines/index.vue"
import Screen from "@/components/Action/screen/index.vue"
import Weather from "@/components/Action/weather/index.vue"
import Theme from "@/components/Action/theme/index.vue"
import Dark from "@/components/Action/dark/index.vue"
import Tabs from "@/components/Action/tabs/index.vue"
import Gray from "@/components/Action/gray/index.vue"
interface ActionsProps {
    renderList:string[]
}

const props = defineProps<ActionsProps>()

const findActions = (str:string):boolean => {
    let flag =  props.renderList.findIndex(item => item === str)
    
    return flag === -1 ? false : true
}

</script>
<style lang="less" scoped>

</style>